<!DOCTYPE html>
<html>
	<head>
	<meta name="layout" content="main_pc">
	<title>火堆</title>	
	<link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'project.css')}" type="text/css">
	<link rel="stylesheet" type="text/css" href="${resource(dir: 'editerPlugin/simditor-2.2.4/styles', file: 'simditor.css')}" />
    <link rel="stylesheet" type="text/css" href="${resource(dir: 'editerPlugin/simditor-2.2.4/styles', file: 'app.css')}" />
	<script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'module.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'hotkeys.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'uploader.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'simditor.js')}"></script>
	<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
    <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
	
	<style type="text/css">
	.btn-del {
	    font-size: 22px;
	    text-align: center;
	    color: #fff;
	    font-weight: normal;
	    background-color: #fb6e50;
    }
	</style>
	</head>
	<body>
	
	
	<section class="u-container">
        <div class="uc-left">
           <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>项目
                </div>
                <ul>
                    <li><a href="/scfire/project/projectSystemInfo">系统通知</a></li>
                    <li><a href="/scfire/user/userCenterDetail">管理项目</a></li>
                    <li class="active"><a href="/scfire/project/create">发起项目</a></li>
                </ul>
            </div>
            <div class="nav-list">
                <div class="head">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>设置
                </div>
                <ul>
                    <li><a href="/scfire/user/userAuth">实名认证</a></li>
                </ul>
            </div>
        </div>
        <div class="uc-right">
            <div class="launch-container">
                <div class="title">发起项目</div>
                <div class="content">
                    	<g:form id = "all-form" url="[resource:projectInstance, action:'save']" method="post" class="form-style3">
                        <div class="form-item fix-width i">
                            <label for="">标题<span class="tips">(标题不超过15个字)</span></label>
                            <div class="form-tips">
                                <div class="info"><span></span>请输入项目标题</div>
                                <div class="err"><span></span>请输入项目标题</div>
                                <div class="right"><span></span></div>
                            </div>
                            <div class="form-ctrl">
                                <input name="name" type="text" data-count="15" onblur="checkValid(this, isNull)"/>
                                <div class="count">15</div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">类别<span class="tips">(请选择类别)</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="select-ctrl">
                                 <span class="icon"><img src="${resource(dir:'img_pc',file:'icon-down.png')}"></span>
                                    <select id="maincate-select" onchange="mainCate(this)">
                                        <option value="100001" selected="selected">培训活动</option>
                                        <option value="100002">教学物资</option>
                                        <option value="100003">学术创新</option> 
                                        <option value="100004">其他</option>
                                    </select>
                                    <input type="hidden" name="maincate" value="100001" id="maincate"/>
                                    
                                    <!-- <div data-toggle="dropdown">
                                        <span class="val">Dropdown trigger</span>
                                        <span class="icon"><img src="../img_pc/icon-down.png"></span>
                                    </div>
                                    <ul class="dropdown-menu">
                                        <li>item1</li>
                                        <li>item2</li>
                                        <li>item3</li>
                                        <li>item4</li>
                                    </ul> -->
                                </div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">地域<span class="tips">(请选择项目执行地点)</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="select-ctrl">
                                 <span class="icon"style="margin-top:10px;"><img  src="${resource(dir:'img_pc',file:'icon-down.png')}"></span>
                                      
						                    <select name="" id="s_province" style="float:left;width:49%;">
						                        <option value="0" selected="" disabled="">选择省</option>
						                    </select>
						                    <span class="icon"style="margin-top:10px;right:51%;"><img  src="${resource(dir:'img_pc',file:'icon-down.png')}"></span>
						                    <select name="" id="s_city" style="margin-left:2%;float:left;width:49%;">
						                        <option value="0" selected="" disabled="">选择市</option>
						                    </select>
						                 
						                 <div class="ui-form-item ui-form-item-show ui-form-item-link ui-border-b" style="display:none">
						                    <select name="" id="s_county">
						                        <option value="0" selected="" disabled="">选择区县</option>
						                    </select>   
						            </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-item fix-width i">
                            <label for="">摘要<span class="tips">(摘要不超过50个字)</span></label>
                            <div class="form-tips">
                            	<div class="info"><span></span>请输入项目摘要</div>
                                <div class="err"><span></span>请输入项目摘要</div>
                                <div class="right"><span></span></div></div>
                            <div class="form-ctrl">
                                <textarea name="description" data-count="50" onblur="checkValid(this, isNull)"></textarea>
                                <span class="count">50</span>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">封面<span class="tips">(支持jpg，png，大小不超过5M)</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="img-box btn o no-border">
                                <input type="hidden" name="projectimg" id="projectimg" value="" >
                                    +点击上传图片
                                    <input type="file" class="upload-cover" id="img-p" name="img-p">
                                </div>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">募集天数
                                <span class="tips">(<span class="warn">提交后不可修改</span>)， 天数范围额1-99天</span>
                            </label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <input  name="datanum" type="text" class="date" onblur="checkInputNum(1, 99, this);" value="1"/>
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="">计划清单<span class="tips">( 提交后不可修改 )</span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="list-head">
                                    <span>名称<span class="tips"></span></span>
                                    <span>单价<span class="tips"> ( 精确到分 ）</span></span>
                                    <span>数量 <span class="tips">( 范围1~999 ）</span></span>
                                    <span>合计</span>
                                </div>
                                <ul class="list-items">
                                    <li>
                                        <input name="fundraisename" type="text" value="输入品名" onfocus="deleteDefault(this,'输入品名')" onblur="defaultValueCheck(this, '输入品名');"/>
                                        <input name="fundraiseprice" type="text" value="0.0" onfocus="deleteDefault(this,'0.0')"  onblur="defaultValueCheck(this, '0.0');checkFloatNum(this,0.0);calculate(this);total();"/>
                                        <input name="fundraisenum" type="text" value="0" onfocus="deleteDefault(this,'0')"  onblur="checkInputNum(1, 999, this);defaultValueCheck(this, '0');calculate(this);total();"/>
                                        <span >￥0.0</span>
                                        <b class="btn-del" onclick="$(this).parent().remove();">&times;</b>
                                    </li>
                                </ul>
                                <div class="btn o no-border add-items">+添加清单条目</div>
                            </div>
                        </div>
                        <div class="form-item">
                            <label for="">项目详情</label>
                            <div class="form-ctrl">
                                <div class="adjoined-bottom">
									<div class="grid-container">
										<div class="grid-width-100">
											<div id="editor" name="projectDetail">
											
											</div>
										</div>
									</div>
								</div>
                            </div>
                            <input type="hidden" id="projectDetail" name="projectDetail" value="">
                        </div>
                        <div class="form-item">
                            <div class="btn-container">
                                <div class="btn o btn-save-all" onclick="">保存</div>
                                <div class="btn o btn-submit-all" onclick="">提交</div>
                            </div>
                        </div>
                        <input type="hidden" id="save-type" name="saveType" >
                    </g:form>
                    <div class="preview">
                        <h6>预览区域</h6>
                        <div class="cover">
                            <div class="img" style="background-image:url()"></div>
                            <div class="txt">封面</div>
                        </div>
                        <div class="detail">
                            <ul>
                                <li>
                                    <div class="title">类型：</div>
                                    <div class="val"><span class="donateType">培训活动</span></div>
                                </li>
                                <li>
                                    <div class="title">天数：</div>
                                    <div class="val"><span class="date">1</span>天</div>
                                </li>
                                <li>
                                    <div class="title">总价：</div>
                                    <div class="val"><span class="num">0</span>元</div>
                                </li>
                            </ul>
                        </div>
                        <div class="note">注：项目提交后筹款天数和筹款总金额无法在修改，请仔细确认检查</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
		
	   <script type="text/javascript" src="${resource(dir: 'js', file: 'area.js')}"></script>
     <script type="text/javascript">
     var titleStates = false;
  	 var posterStates =false;
     toolbar = [ 'title','color', '|', 
                'link', 'image',  '|' ];
     var editor = new Simditor( {
            textarea : $('#editor'),
            placeholder : '这里输入内容...',
            toolbar : toolbar,  //工具栏
            defaultImage : 'simditor-2.0.1/images/image.png', //编辑器插入图片时使用的默认图片
            upload : {
                url : '/scfire/project/imgSave', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey: 'fileDataFileName', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            } 
        });
     $(function() {
     _init_area();
         // 绑定对应元素的字数校验事件
         var bind_name = 'input';
         if (navigator.userAgent.indexOf("MSIE") != -1) {
             bind_name = 'propertychange';
         }
         $('[data-count]').bind(bind_name, count);
         $('.img-box').on('change', 'input[type=file]' ,function(){
             //the url is for test ....
             posterStates = true;
             var obj = $(this);
             var file = obj.attr('id');
              $.ajaxFileUpload({  
         			url:'/scfire/project/imgSaveMb',  
         			secureuri:false,  
         			dataType:'text',
         			fileElementId:file,//file标签的id 
         			success: function (data, status) { 
 			           	if(data=='large'){
 			           		showWarn('图片过大');
 			           		return;
 			           	}
 			       		if(data=='format'){
 			           		showWarn('图片格式不对');
 			           		return;
 			           	}
 		               //把图片替换  
 		               if(data=='fail'){
 		               		showWarn('上传失败');
 		               }else{
 		            	   //图片预览
 		                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
 		                   $('.preview .cover .img').css('background-image', 'url(' + imageurl + ')');
 		                   //图片地址赋值给后台
 		                   $("#projectimg").val(data);  
 		                   
 		                   $("#img-p").replaceWith('<input type="file" class="upload-cover" id="img-p" name="img-p"/>');
                 
 		               }
 		           },  
 		           error: function (data, status, e) {  
 		           },
 		          
         	});
         });
         var item = $('.list-items li').clone();
         $('.add-items').click(function(){
             var cp = item.clone();
             $(this).siblings('.list-items').append(cp);
         });
         
         $('.list-items input').blur(function(){
            var price = $(this).parent("[name='fundraiseprice']");
            var count = $(this).parent("[name='fundraisenum']");
         	$(this).siblings('span').val((price * count).toFixed(2));
         });
         
         
         $('input.date').blur(function(){
             $('.preview .date').text($(this).val())
         })

         $('#maincate-select').change(function(){
             $('.preview .donateType').text($('#maincate-select option:selected').text())
         })

       //保存
 		$('.btn-save-all').click(function(){
 			 if(!checkNull()){
 			 	return;
 			 }
 			 $("#save-type").val("draft");
 			//save context
 	    	 var data = editor.getValue();
 	    	 $("#projectDetail").val(data);
 	    	 //console.log(data);
 	         //$("#save-dialog").addClass('show');
 	         $("#all-form").submit();
 	         
 	    });
 	    
 	    //提交
 	    $('.btn-submit-all').click(function(){
 	         $("#save-type").val("");
 	    	 if(!checkForm()){
 	    	 	return;
 	    	 }
 	    	 //save context
 	    	 var data = editor.getValue();
 	    	 $("#projectDetail").val(data);
 	    	 //console.log(data);
 	    	 $("#all-form").submit();
 	         //$("#submit-dialog").addClass('show');
 	    });
     })

     function calculate(obj){
      		var price = $(obj).parent().find("[name='fundraiseprice']");
            var count = $(obj).parent().find("[name='fundraisenum']");
            //console.log("p:" + price.val());
            //console.log("c:" + count.val());
         	$(obj).siblings('span').text("￥"+(price.val() * count.val()).toFixed(2));
         	//console.log(price * count);
     }
     
     function total(){
         var values = $('.list-items span');
         var total = 0.0;
         //console.log(values.text());
         values.each(function(){
         	total += parseFloat($(this).text().replace('￥', ""));
         });
         //console.log(total);
         $('.preview .num').text(total.toFixed(2));
         return total;
     }
     
     function count() {
         n = $(this).data('count');
         if($(this).val().length > n) {$(this).val($(this).val().substr(0,n)); return;}
         $(this).siblings('.count').text( n - $(this).val().length );
     }

     function checkInputNum(least, most, element){
     	var num = element.value 
         if(!(/^\d+$/.test(num))){
             //alert("输入的数字有误！");
             element.value = least;
         }
         else if(num < least){
         	element.value = least;
         }
         else if(num > most){
         	element.value = most;
         }
     }

     function checkFloatNum(element, init){
     	var num = element.value 
     	if(!(/^\d+(\.\d{1,2})?$/.test(num))){
     		alert("输入正确的价格，最多允许两位小数！");
             element.value = init;
     	}
     }

     function defaultValueCheck(element, init){
      	var num = element.value 
      	if(num == '' || num == 'undefined'){
      		//alert("您没有输入合法值");
            element.value = init;
            return false;
      	}
      	return true;
      }

     function isNull(element){
       	if(element == '' || element == 'undefined'){
       		//alert("您没有输入合法值");
             return false;
       	}
       	return true;
       }

     function deleteDefault(element, info){
    	var num = element.value 
       	if(num == info){
             element.value = '';
             return true;
       	}
       	return false;
     }

     function checkValid(obj, checkfun){
     	//get value
     	var value = $(obj).val()== undefined ? $(obj).text():$(obj).val();
     	var result = checkfun(value);
     	//console.log("input: "+value);
     	if(result == false){
     		//show err msg
     		$(obj).parent().parent().removeClass("i").removeClass("r").addClass("e");
     	}
     	else{
     		//show ok msg
     		$(obj).parent().parent().removeClass("i").removeClass("e").addClass("r");
     	}
     }

     function mainCate(code){
 		$("#maincate").val(code.value);
 	}

    function checkNull(){
        
    	var element = $("input[name=name]");
    	var obj = element.val();
    	if(obj == ''){
    		titleStates = false;
    	}
    	else{
    		titleStates = true;
    	}
    	//changeButtonStates();
    	if(!posterStates){
    		alert("请上传海报");
    		//$('.btn-save-all').attr("disabled",false);
    		//$('.btn-submit-all').attr("disabled",false);
    		//$('.btn-save-all').attr("disabled",true);
    		//$('.btn-submit-all').attr("disabled",ture);
    		return false;
    	}
    	if(!titleStates){
    		alert("请填写标题");
    		return false;
    	}
    	return true;
    }

    function checkForm(){
		var projectimg = $("#projectimg").val();
		var name = $("input[name=name]").val();
		var description = $("textarea[name=description]").val();
		var dateNum = $("input[name=datanum]").val();
		var type= $("input[name=mainCate]").val();
		var fundraise = total();
		//获取编辑框内容
		var detail = editor.getValue();
		//console.log(detail);
		
		if(projectimg == ''){
			alert("请上传海报");
			return false;
		}
		if(name == ''){
			alert("请填写项目标题");
			return false;
		}
		if(description == ''){
			alert("请填写项目摘要");
			return false;
		}
		if(type ==''){
			alert("请选择项目类型");
			return false;
		}
		if(dateNum == ''){
			alert("请填写筹集天数");
			return false;
		}
		if(detail == ''){
			alert("请填写项目详情");
			return false;
		}
		if(fundraise == 0.0){
			alert("筹款总额为0，请检查项目清单是否填写正确");
			return false;
		}
		
		return true;
	}
     
     </script>
       
	</body>
</html>
